<template>
  <div class="profile">
    <hm-header>
      <template #left>
        <i class="iconfont iconjiantou2" @click="$router.push('/home')"></i>
      </template>
      <template #center>个人中心</template>
    </hm-header>

    <div class="user">
      <div class="avatar">
        <img :src="userInfo.head_img | imgUrl" alt="">
      </div>
      <div class="user-info">
        <i class="iconfont iconxingbienan" v-if="userInfo.gender === 1"></i>
        <i class="iconfont iconxingbienv" v-else></i>
        <span class="name">
          {{ userInfo.nickname }}
        </span>
        <div class="time">
          {{ userInfo.create_date | formatDate }}
        </div>
      </div>
      <div class="right-arrow" @click="toEditUser">
        <i class="iconfont iconjiantou1"></i>
      </div>
    </div>

    <hm-nav name="我的关注" desc="关注的用户" @click.native="toAttention"></hm-nav>
    <hm-nav name="我的跟帖" desc="跟帖 / 回复" @click.native="toMyComments"></hm-nav>
    <hm-nav name="我的收藏" desc="文章 / 视频" @click.native="toMyCollections"></hm-nav>
    <hm-nav name="设置" @click.native="toEditUser"></hm-nav>

    <div class="logout">
      <van-button type="info" size="large" round @click="logout">退出</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: '',
      userInfo: {}
    }
  },

  created () {
    this.id = localStorage.getItem('user_id')
    this.getUserInfo()
  },

  methods: {
    // 获取用户信息
    async getUserInfo () {
      const { data: res } = await this.$axios.get(`/user/${this.id}`)
      if (res.statusCode !== 200) {
        return this.$toast.fail(res.message)
      }
      this.userInfo = res.data
    },

    toEditUser () {
      this.$router.push({ path: '/edituser', query: { id: this.id } })
    },

    toAttention () {
      this.$router.push({ path: '/attention' })
    },

    toMyComments () {
      this.$router.push({ path: '/my-comments' })
    },

    toMyCollections () {
      this.$router.push({ path: '/my-collections' })
    },

    async logout () {
      try {
        await this.$Dialog.confirm({
          title: '提示',
          message: '您确定要退出吗？'
        })
        localStorage.removeItem('accessToken')
        localStorage.removeItem('user_id')
        this.$router.push('/login')
      } catch (err) {}
    }
  }
}
</script>

<style lang="scss" scoped>
.user {
  display: flex;
  padding: 20px;
  align-items: center;
  border-bottom: 5px solid #eee;

  .avatar {
    margin-right: 10px;
    img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    }
  }

  .user-info {
    flex: 1;

    .iconxingbienan {
      color: #85b9e7;
    }

    .iconxingbienv {
      color: hotpink;
    }

    .name {
      font-size: 16px;
      color: #000;
    }

    .time {
      font-size: 14px;
      color: #666;
    }
  }

  right-arrow {
    color: #666;
  }

}

.logout {
  padding: 40px 20px 0px 20px;
}
</style>
